<template>
  <div class="inter-face-list">
    <div id="inter_list">
      <div style="
          height: 50px;
          font: bold 24px/50px 'microsoft yahei';
          color: #000;
          text-align: center;
        ">
        <i class="el-icon-s-management">接口管理</i>
      </div>
      <div style="background: #f0f0f0; height: 5px"></div>
      <!--树形菜单组件呈现[测试任务->测试套件->测试用例]，其中default-active表示当前选中的菜单，背景颜色不同-->
      <el-menu class="el-menu-vertical-demo"
               style="height: calc(100vh - 170px); overflow-y: auto"
               :default-active="defaultActive">
        <!--中间层测试套件，呈现菜单下的所有[测试套件]-->
        <el-submenu :index="module.id"
                    v-for="module in moduleList"
                    :key="module.id">
          <template slot="title">
            <i class="el-icon-folder"></i>
            <span>{{ module.name }}
              <el-tooltip content="删除模块"
                          placement="right"
                          effect="light">
                <i class="el-icon-document"></i>
                <span>
                  <el-button type="text"
                             icon="el-icon-delete"
                             @click.stop="removeModule(module.id)"
                             style="margin-bottom: 5px"></el-button>
                </span>
              </el-tooltip>
                <el-tooltip content="模块编辑"
                              placement="right"
                              effect="light">
                    <i class="el-icon-document"></i>
                    <span>
                      <el-button type="text"
                                 icon="el-icon-edit"
                                 @click.stop="showEdit()"
                                 style="margin-bottom: 5px"></el-button>
                    </span>
                  </el-tooltip>
            </span>
          </template>
          <!--里层呈现模块接口，注意index的定义，才能保证被选中-->
          <el-menu-item :index="module.id + '_' + interfaces.id"
                        v-for="interfaces in module.infoOutputDto"
                        :key="interfaces.id"
                        @click="selectInterface(module,interfaces)"
                        :ref="module.id + '_' + interfaces.id ">
            <template slot="title">
              <el-tooltip v-if="interfaces.name.length > 17"
                          :content="interfaces.name"
                          placement="right"
                          effect="light">
                <i class="el-icon-document"></i>
                <span>{{
                      interfaces.name.length > 17
                      ? interfaces.name.substr(0, 17) + '...'
                      : interfaces.name
                    }}</span>
              </el-tooltip>
              <span v-else>{{
                    interfaces.name
                  }}</span>
            </template>
          </el-menu-item>
          <!-- 添加用例 -->
          <!-- <el-menu-item>
            <template>
              <el-button type="text"
                         @click.stop="showAddForTestCase(testSuit.id, task.id)">
                <i class="el-icon-folder-add"
                   style="color: #67c23a; font-size: 14px">
                  添加用例
                </i>
              </el-button>
              <el-button type="text"
                         @click.stop="pasteTestCase(testSuit, task)"
                         v-if="copyTestCase"
                         style="margin-left: 60px">
                <i class="el-icon-printer"
                   style="color: #67c23a; font-size: 14px">
                  粘贴用例
                </i>
              </el-button>
            </template>
          </el-menu-item> -->
        </el-submenu>
        <!-- 添加测试套件 -->
        <!-- <el-menu-item @click="showEditForTestSuit(null, task.id)">
              <template slot="title">
                <div>
                  <i
                    class="el-icon-folder-add"
                    style="color: #67c23a; font-size: 18px"
                  >
                    <span style="font-size: 14px"> 添加套件</span></i
                  >
                </div>
              </template>
            </el-menu-item>
          </el-submenu> -->
      </el-menu>
    </div>
    <!--编辑测试套件对话框-->
    <!-- <el-dialog
        :visible.sync="editVisibleForTestSuit"
        :title="currentTestSuitId ? '编辑测试套件' : '添加测试套件'"
        center
        append-to-body
        :close-on-click-modal="false"
      >
        <test-suit-edit
          :id="currentTestSuitId"
          :taskId="currentTaskId"
          @callbackForSave="callbackForSaveForTestSuit"
          @callbackForCancel="callbackForCancelForTestSuit"
          v-if="editVisibleForTestSuit"
        ></test-suit-edit>
      </el-dialog> -->
    <!--编辑测试用例对话框-->
    <!-- <el-dialog
        :visible.sync="editVisibleForTestCase"
        title="添加测试用例"
        center
        append-to-body
        :close-on-click-modal="false"
      >
        <test-case-add
          :testSuitId="currentTestSuitId"
          :taskId="currentTaskId"
          @callbackForSave="callbackForSaveForTestCase"
          @callbackForCancel="callbackForCancelForTestCase"
          v-if="editVisibleForTestCase"
        ></test-case-add>
      </el-dialog> -->
      <el-dialog
        :visible.sync="editVisible"
        :title="currentId ? '编辑模块' : '添加模块'"
        center
        :close-on-click-modal="false"
      >
        <module-edit
          :id="currentId"
          @callbackForSave="callbackForSave"
          @callbackForCancel="callbackForCancel"
          v-if="editVisible"
        ></module-edit>
      </el-dialog>
  </div>
</template>

<script>
import * as apiInfo from '../../api/interfaceInfo'
import * as apiModule from '../../api/module'
import ModuleEdit from '../../components/module/ModuleEdit'
export default {
  name: 'InterfaceInfo',
  data() {
    return {
      filterText: '',
      moduleList: [],
      //当前选中项
      defaultActive: '-1',
      querey: {
        projectId: '',
      },
      editVisible: false,
    }
  },
  computed: {
    // 获取当前项目
    project() {
      return this.$store.getters.getCurrentProject
    },
  },
  components:{
    ModuleEdit
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  created() {
    this.getInitData()
  },
  methods: {
    getInitData() {
      apiModule.getModuleInterface(this.project.id).then((response) => {
        let result = response.data
        this.moduleList = result.data
        if (result.code !== 0) {
          this.$message({
            message: result.message,
            type: 'error',
          })
          return
        }
      })
    },
    handleOpen(key, keyPath) {
      this.querey.projectId = this.project.id
      this.querey.moduleId = key
      console.log('==========' + keyPath)
      apiInfo.query(this.querey).then((response) => {
        let result = response.data
        this.interfaceList = result.data
        if (result.code !== 0) {
          this.$message({
            message: result.message,
            type: 'error',
          })
          return
        }
      })
    },
    handleClose(key, keyPath) {
      console.log(key, '+++++++++' + keyPath)
    },
     //显示详情弹窗
    showEdit(id) {
      //设置传递的id
      this.currentId = id
      //显示弹出对话框
      this.editVisible = true
    },
    removeModule(id){
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
           apiModule.remove(id).then((response) => {
            let result = response.data
            if (result.code == 0) {
              this.$message({
                message: "删除成功",
                type: 'info',
              })
              this.getInitData();
              return
            } else {
              this.$message({
                message: result.message,
                type: 'error',
              })
              return
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
        //选择测试用例，此时需要切换菜单选中项，并设置当前测试用例
    selectInterface(module, interfaces) {
      //设置当前激活测试用例菜单
      this.defaultActive = module.id + '_' + interfaces.id 
      //设置当前测试用例
      this.$store.commit('setCurrentInterface', interfaces)
    },
  },
}
</script>

<style></style>